import { defineStore } from 'pinia'

export const useThemeStore = defineStore('theme', {
    state: () => {
        return {
            theme: localStorage.getItem('theme') || 'dark'
        }
    },
    actions: {
        changeTheme () {
            if (this.theme === 'dark') {
                localStorage.setItem('theme', 'light')
                this.theme = 'light'
                document.querySelector('html').dataset.theme = 'light'
                document.documentElement.removeAttribute("theme-mode");
            } else {
                localStorage.setItem('theme', 'dark')
                this.theme = 'dark'
                document.querySelector('html').dataset.theme = 'dark'
                document.querySelector('html').setAttribute("theme-mode", "dark");
            }

        }
    },
})
